<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Continually reversing a transition is supported.</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-transitions/#reversing" />
        <meta name="flags" content="animated dom" />
        <meta name="assert" content="Continually reversing a transition is supported." />
        <style type="text/css">
            #parentDiv
            {
                position: relative;
            }
            #startDiv
            {
                background-color: blue;
                height: 50px;
                position: absolute;
                width: 50px;
            }
            #endDiv
            {
                background-color: orange;
                height: 50px;
                left: 400px;
                position: absolute;
                width: 50px;
            }
            #testDiv
            {
                background-color: black;
                height: 50px;
                left: 0px;
                position: absolute;  
                transition-property: left;
                transition-duration: 6s;
                transition-timing-function: linear;
                width: 50px;
            }
        </style>
        <script type="text/javascript">
            var movingRight = true;
            var element;
            function reverse()
            {
                if(movingRight)
                {
                    element.style['left'] = '0px';
                    movingRight = false;
                }
                else
                {
                    element.style['left'] = '400px';
                    movingRight = true;
                }
                
                setTimeout("reverse()", 2000);
            }
            function startTest()
            {
                document.body.offsetWidth;
                element = document.getElementById("testDiv");
                element.style["left"] = "400px"; 
                setTimeout("reverse()", 4000);
            }
        </script>
    </head>
    <body onload="startTest()">
        <p>Test passes if the black square first slides from the blue square toward the orange square, then begins continuously changing direction and never reaches either the blue or the orange square.</p>
        <div id="parentDiv">
            <div id="startDiv"></div>
            <div id="endDiv"></div>
            <div id="testDiv"></div>
        </div>
    </body>
</html>
